<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐在自学</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/topbar.css}">
    <script th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/echarts.min.js}"></script>



</head>

<body>
<!-- 头部引入 -->
<div th:insert="~{_topbar :: topbar}" id="topbar"></div>
    <div class="nav-container">
        <div class="layui-container">
            <div style="height: 10px;clear: both;"></div>
            <div class="layui-row">
                <div class="layui-card">
                    <div class="layui-card-header">提示信息</div>
                    <div class="layui-card-body">
                        <img src="../images/mychart1.png" alt="">
                        <img src="../images/mychart2.png" alt="">
                        <img src="../images/mychart3.png" alt="">
                    </div>
                </div>
            </div>
            <div id="chartmain" style="width:100%;height:1400px;margin-top: 10px;"></div>
        </div>
    </div>

<!-- 尾部引入 -->
<div th:insert="~{_endbar :: endbar}" id="endbar"></div>
</body>
<script>
    layui.use("jquery", function () {
        var $ = layui.$;

        //搜索按钮
        $("#search-i").on('click',function(){
            var keyword = $("#search-input").val();
            window.location.href = "http://search.lyfx.com/all-class?keyword=" + keyword;
        })

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'), 'light');

        myChart.showLoading();
        $.get('../json/mychart.json', function (data) {
            myChart.hideLoading();    //得到数据后隐藏Loading标志
            // echarts.util.each(data.children, function (datum, index) {
            //     index % 2 === 0 && (datum.collapsed = true);
            // });    //间隔展开子数据，animate，display，physics，scale，vis是展开的
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'java学习路线',
                    textStyle: {
                        //文字颜色
                        color: '#222',
                        //字体风格,'normal','italic','oblique'
                        fontStyle: 'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight: 'bold',
                        //字体系列
                        fontFamily: 'sans-serif',
                        //字体大小
                        fontSize: 30
                    }
                },
                series: [
                    {
                        type: 'tree',
                        // 普通样式。
                        itemStyle: {
                            // 点的颜色。
                            color: '#FFCC99',
                            borderColor: '#FF9966'
                        },
                        //通过label标签，设置哪些已经学过了，那些没有学过
                        data: [data],

                        // orient : 'TB',//从上到下 'LR'，从左到右
                        top: '1%',
                        left: '10%',
                        bottom: '1%',
                        right: '20%',

                        symbolSize: 20,//圆圈的大小
                        initialTreeDepth: 2,//默认：2，树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，... ，直到叶子节点
                        //标签的样式

                        roam: 'move',

                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 19,
                            color: '#212529'
                        },
                        //叶子节点的样式
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            },
                            itemStyle: {
                                borderColor: "#01AAED"
                            }
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            };
            //点击事件，获取节点信息
            myChart.on('click', function (params) {
                // 控制台打印数据的名称
                console.log('获取节点信息', params);
            });
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        })

    })
</script>

</html>